<template>
  <Head>
    <Title>Course Category</Title>
  </Head>
  <PageHeader
    title="Course Category"
    subtitle="Course Category"
    :image="`${$config.public.baseUrl}images/bg/home1/8.png`"/>
  <div class="course course--style1 padding-top padding-bottom">
    <div class="container">
      <div
        class="course__topbar mb-5"
        data-aos="fade-up"
        data-aos-duration="800"
      >
        <div class="course__topbar-left">
          <select name="cars" class="form-select categories-filter">
            <option value="">Filter By</option>
            <option value="content">UI/UX</option>
            <option value="web">Web Design</option>
            <option value="graphic">Graphic</option>
            <option value="seo">Social</option>
          </select>
        </div>
        <div class="course__topbar-right">
          <div class="course__search">
            <div class="body">
              <form class="" action="#">
                <div class="input-group">
                  <input
                    type="text"
                    class="form-control"
                    placeholder="Search"
                  />
                  <button type="submit" class="search-btn">
                    <i class="fa-solid fa-magnifying-glass"></i>
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
        <Pagination :dataList="courses.slice(0, 27)" :paginate="9">
          <template #content="{ list }">
            <div class="row g-4">
              <div
                v-for="(itm, idx) in list"
                :key="idx"
                class="col-lg-4 col-md-6"
              >
                <CourseCard :courseDetails="itm" />
              </div>
            </div>
          </template>
          <template #button="{ paginationButtons, updateCurrent, current }">
            <div class="paginations">
              <ul class="lab-ul d-flex flex-wrap justify-content-center mb-1">
                <li>
                  <a
                    href="javascript:void(0);"
                    @click="updateCurrent(current - 1 || 1)"
                    ><i class="fa-solid fa-arrow-left"></i
                  ></a>
                </li>
                <li v-for="item in paginationButtons" :key="item">
                  <a
                    href="javascript:void(0);"
                    :class="{ active: current === item }"
                    @click="updateCurrent(item)"
                  >
                    {{ item }}
                  </a>
                </li>
                <li>
                  <a
                    href="javascript:void(0);"
                    @click="
                      updateCurrent(
                        paginationButtons > current
                          ? current + 1
                          : paginationButtons
                      )
                    "
                    ><i class="fa-solid fa-arrow-right"></i
                  ></a>
                </li>
              </ul>
            </div>
          </template>
        </Pagination>
    </div>
  </div>
  <div class="newsletter" data-aos="fade-up" data-aos-duration="800">
    <div class="container">
      <Newsletter />
    </div>
  </div>
</template>

<script>
import PageHeader from "@/components/partials/PageHeader.vue";
import Pagination from "@/components/base/slots/Pagination.vue";
import CourseCard from "@/components/partials/CourseCard.vue";
import Newsletter from "@/components/partials/newsletters/Newsletter.vue";
export default {
  components: { PageHeader, Pagination, CourseCard, Newsletter },
  async setup() {
    const { axios } = fetchData();

    const coursesResponse = await axios.get("/courses.json");
    const courses = coursesResponse.data;
    return {
      courses,
    };
  },
};
</script>

<style>
</style>